<template>
    <div class="container">
        <leftmenu></leftmenu>
        <headerinfo></headerinfo>
        <div class="header">
            <spglheader @mode="changeModel"></spglheader>
        </div>
        <div class="spgl">
            <div class="main2">
                <div class="modelA" v-if="isSeen">
                    <div v-for="i in goodsList" v-bind:key="i" class="modelAson">
                        <img :src="i.image">
                        <span class="price">￥{{i.price}}</span>
                        <span class="goodname">{{i.title}}</span>
                        <span class="icon">
                            <a href="#" @click="edit(i)">
                              <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                            </a>
                            <a href="#" @click="deleteByid(i.id)">
                              <i class="fa fa-trash-o" aria-hidden="true"></i>
                            </a>
                         </span>
                    </div>
                    <div class="pagehelper">
                        <div class="pagehelper">
                            <el-pagination
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                                    small="true"
                                    layout="prev, pager, next"
                                    :page-count="pagination.pageCount"
                                    :page-size="4"
                                    :total="pagination.total">
                            </el-pagination>
                        </div>
                    </div>
                </div>

                <div class="modelB" v-else>
                    <div class="modelBson" v-for="i in goodsList" v-bind:key="i">
                        <img :src="i.image">
                        <span class="title">{{i.title}}</span>
                        <span class="price">￥{{i.price}}</span>
                        <span class="status">拣货中</span>
                        <span class="icon">
                          <a href="#" @click="edit(i)">
                            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
                          </a>
                          <a href="#" @click="deleteByid(i.id)">
                            <i class="fa fa-trash-o" aria-hidden="true"></i>
                          </a>
                        </span>
                    </div>
                    <div class="pagehelper">
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                small="true"
                                layout="prev, pager, next"
                                :page-count="pagination.pageCount"
                                :page-size="4"
                                :total="pagination.total">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    module.exports = {
        data() {
            return {
                isSeen: true,
                goodsList: [],

                pagination: {
                    total: "",
                    size: "",
                    pageCount: ""
                }
            };
        },
        mounted() {
            this.getAllGoods(1, 4);
        },
        methods: {
            handleSizeChange(sizeChange) {
                console.log(sizeChange)
            },
            handleCurrentChange(currentChange) {
                console.log("总共有多少条数据", this.pagination.total)
                this.getAllGoods(currentChange, 4);
                console.log(currentChange)
            },
            //编辑的页面
            edit(info) {
                console.log(info)
                location.href = 'goodsadd.html?id=' + info.id + '&title=' + info.title + '&comment=' + info.comment + '&price=' + info.price + '&image=' + info.image;
            },
            changeModel(childSeen) {
                // console.log(childSeen);
                this.isSeen = !childSeen;
            },
            getAllGoods(current, limit) {
                axios.get(`/goods/page/${current}/${limit}`).then((res) => {
                    this.goodsList = res.data.extend.data.records
                    this.pagination.total = res.data.extend.data.total;
                    this.pagination.pageCount = res.data.extend.data.pages

                    console.log("res-->", res)
                    console.log("this.goodsList--->", this.goodsList)
                })
            },
            deleteByid(id) {
                axios.delete('/goods/' + id).then((res) => {
                    alert("确定删除吗！")
                    console.log(res)
                }).finally(() => {
                    location.reload();
                })
                // console.log(id)
            }
        },
    };
</script>

<style scoped>
    .pagehelper {
        /* border: 1px solid red; */
        position: absolute;
        width: 93%;
        height: 8%;
        left: 2%;
        top: 83%;
        text-align: center;
        font-size: 1px;
    }

    .modelBson .icon {
        position: relative;
        left: 64%;
        top: -35%;
        font-size: 25px;
    }

    .modelBson .status {
        position: relative;
        top: -43%;
        left: 48%;
    }

    .modelBson .price {
        left: 37%;
        top: -43%;
        position: relative;
    }

    .modelB .modelBson .title {
        position: relative;
        top: -50%;
        left: 20%;
    }

    .modelB .modelBson {
        position: relative;
        top: 3%;
        width: 100%;
        height: 15%;
        margin-top: 22px;
        background-color: whitesmoke;
    }

    .modelB .modelBson img {
        width: 100PX;
        height: 100px;
        position: relative;
        left: 3%;
        border-radius: 14%;
        overflow: hidden;
    }

    .fa-edit:before,
    .fa-pencil-square-o:before {
        content: "\f044";
        position: relative;
        left: -100%;
    }

    .modelA .modelAson .icon {
        top: -12%;
        left: -70%;
        display: flex;
        justify-content: flex-end;
        position: relative;
        font-size: 20px;
    }

    .modelA .modelAson .icon i {
        content: "\f14b";
        left: -90%;
    }

    .modelA .goodname {
        position: relative;
        left: 35%;
        top: 4%;
    }

    .modelA .price {
        position: relative;
        left: 38%;
        top: -16%;
        /* border: 1px solid; */
        display: block;
    }

    .modelAson img {
        width: 100px;
        height: 100px;
        position: relative;
        margin: 17%;
        border-radius: 20%;
        top: -5%;
        left: 5%;
    }

    .modelAson {
        width: 15%;
        height: 30%;
        /* border: 1px solid wheat; */
        float: left;
        margin: 5%;
        background-color: whitesmoke;
    }

    .modelA {
        position: relative;
        /* left: 3%; */

        /* border: 2px solid red; */
        height: 100%;
        border-radius: 15%;
    }

    .modelB {
        /* border: 2px solid rgb(67, 6, 209); */
        height: 100%;
        border-radius: 14%;
    }

    .container {
        /* border: 1px solid red; */
    }

    .header {
        /* border: 1px solid pink; */
        width: 83%;

        height: 12%;
        top: 10%;
        left: 16%;
        position: absolute;
        background-color: white;
    }

    .spgl {
        background-color: silver;
        /* border: 1px solid black; */
        width: 83%;
        height: 78%;
        position: absolute;
        left: 16%;
        top: 22%;
    }

    .main2 {
        border-radius: 2%;
        background-color: white;
        width: 96%;
        height: 93%;
        margin: 0px auto;
        left: 0%;
        position: relative;
        /* border: 1px solid rebeccapurple; */
        top: 5%;
    }
</style>>
